<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        .register {
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <h1>模拟登录</h1>
    <label>用户名：</label><input name="username"/>
    <br/>
    <br/>
    <label>密码：</label><input name="password"/> <br/>
    <br/>
    <br/>
    <button onclick="handleLogin()">登录</button>
    <button class="register" onclick="location.href='/app/register'">没有账号？去注册</button>
<button type="button" onclick="location.href='/app/xss'">查看xss演示案例</button>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>

    $(function () {
        console.log('---init---')
    })

    function getValue(arg) {
        return $(`input[name=${arg}]`).val()
    }

    function clearInput() {
       Array.from($('input')).forEach(item => {
           item.value = ''
       })
    }

    function handleLogin() {
        const username = getValue('username')
        const password = getValue('password')
        if (!username || !password || !password) {
            return alert('账号或密码不能为空')
        }
        $.ajax({
            type: 'post',
            url: '/app/login/',
            data: {
                username, password
            },
            success: function (res) {
                console.log(res)
                if (res && !res.code) {
                    clearInput()
                    alert('恭喜你，登录成功！')
                    window.location.href = '/app/index'
                }else {
                    alert(res.msg || '系统错误')
                }
            },
        })
    }

</script>
</body>
</html>